<script lang="ts">
export default {
  name: "xt-select",
};
</script>

<script setup lang="ts">
import { ElSelect, ElOption } from "element-plus";
import useRefHook from "../../../hooks/ref";
import Typings from "../../../typings";

const { INSTANCE, getInstance } = useRefHook();

interface Props extends /* @vue-ignore */ Typings.Select.props {}

interface Props {
  options: Typings.Common.option[];
  alias?: Typings.Common.alias;
  placeholder?: string;
  clearable?: boolean;
  collapseTags?: boolean;
  filterable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  alias: () => ({ code: "code", name: "name" }),
  placeholder: "请选择",
  clearable: true,
  collapseTags: true,
  filterable: true,
});

defineExpose({
  getInstance,
});
</script>

<template>
  <el-select
    class="xt-select"
    ref="INSTANCE"
    :placeholder="placeholder"
    :clearable="clearable"
    :collapse-tags="collapseTags"
    :filterable="filterable"
  >
    <el-option
      v-for="{
        [props.alias['code']]: code,
        [props.alias['name']]: name,
      } in options"
      :key="code"
      :value="code"
      :label="name"
    />
  </el-select>
</template>

<style lang="scss">
@use "../../../scss/xt-select.scss";
</style>
